<template>
  <a-layout-sider
    v-model:collapsed="collapsed"
    :trigger="null"
    collapsible
    :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0 }"
  >
    <div class="logo">
      <router-link to="/">
        <img :src="logo" />
        <h1 v-if="!collapsed">{{ appName }}</h1>
      </router-link>
    </div>
    <scrollbar height="calc(100vh - 50px)">
      <menus
        :menus="menus"
        theme="dark"
        :mode="collapsed ? 'vertical' : 'inline'"
      />
    </scrollbar>
  </a-layout-sider>
</template>
<script lang="ts">
import { Layout } from 'ant-design-vue'
import { defineComponent } from 'vue'
import { Menus, Scrollbar } from '@/components'

import { useStore } from 'vuex'

export default defineComponent({
  components: {
    ALayoutSider: Layout.Sider,
    Menus,
    Scrollbar,
  },
  props: {
    collapsed: {
      type: Boolean,
      default: true,
    },
    logo: {
      type: String,
      required: true,
    },
    appName: {
      type: String,
      required: true,
    },
  },
  setup(props, ctx) {
    const store = useStore()

    return {
      menus: store.state.user.menus,
    }
  },
})
</script>
<style lang="less" scoped>
.logo {
  height: 48px;
  line-height: 48px;
  padding-left: 16px;
  background-color: #02264a;
}

.logo img {
  width: 32px;
  vertical-align: middle;
}

.logo h1 {
  color: #fefefe;
  font-size: 18px;
  margin: 0 0 0 12px;
  display: inline-block;
  vertical-align: middle;
}
.ant-layout-sider-collapsed .logo {
  padding-left: 22px;
}
</style>
